<template>
  <div id="offerstatus">
    <van-nav-bar
      title="收到的投递"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"

    />
    <van-panel :title="posDetail.name?posDetail.name:'未知名称'" :desc="posDetail.summary||'描述'" :status="statusInfo[posDetail.status]">
      <div class="content">{{posDetail.description}}</div>
      <div slot="footer">
        <van-row type="flex" justify="end">

          <van-button size="small" type="danger">关闭职位</van-button>
        </van-row>
      </div>
    </van-panel>
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <van-cell v-for="(item,index) in resumesList" :key="index" v-on:click="toPeopleDetail(item)">
        <template slot="title">
          <div class="peoplecontent">

            <img class="avatar" :src="item.avatar" alt="tx">
            <div class="des">
              <span class="van-cell-text" style="width:100%;line-height:12px">{{item.comment}}</span>&nbsp;<van-tag :type="tagType(item)">{{peopleSatInfo[item.status]}}</van-tag><br/>
              <span class="van-cell-text" style="width:100%;color:#777">{{item.position?item.position:'未知职位'}}</span>
            </div>

            <div class="stat" >
              <van-button type="primary" size="small" plain :disabled="item.status==7||item.status==6?true:false" v-on:click.stop="updateStatus(item)">更新进度</van-button>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>
    <van-popup v-model="show" position="right" class="updatecontent">
      <div class="content">
        <van-nav-bar
          title="状态更新"
        />
        <van-radio-group v-model="newstatus">
          <van-cell-group>
            <van-cell title="已审核"   @click="newstatus = '1'" v-if="popForitem.status<=1">
              <van-radio name="1" />
            </van-cell>
            <van-cell title="已推荐"   @click="newstatus = '2'" v-if="popForitem.status<=2">
              <van-radio name="2"  />
            </van-cell>
            <van-cell title="已面试"   @click="newstatus = '3'" v-if="popForitem.status<=3">
              <van-radio name="3" />
            </van-cell>
            <van-cell title="已发Offer"   @click="newstatus = '4'" v-if="popForitem.status<=4">
              <van-radio name="4" />
            </van-cell>
            <van-cell title="淘汰"  clickable @click="newstatus = '6'" >
              <van-radio name="6" />
            </van-cell>
            <van-cell title="已入职"   @click="newstatus = '5'" v-if="popForitem.status<=5">
              <van-radio name="5"  />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
          <van-field
            v-if="newstatus == 6"
            v-model="remark"
            label="淘汰原因"
            type="textarea"
            placeholder="请告知淘汰原因"
            rows="5"
            autosize
          />
          <van-button class="btn btn_update" v-if="newstatus != 5" v-on:click="updateHandle">立即更新</van-button>
          <van-button class="btn btn_pay" v-if="newstatus == 5" v-on:click="payPayback">支付报酬</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import Config from './project.config'
export default {
  data(){
    return{
      remark: '',
      newstatus: '',
      show: false,
      resumesList: [],
      currentPage: 1,
      loading:false,
      finished:false,
      posDetail: '',
      statusInfo:['待审核','审核完成','已关闭','已删除','审核不通过'],
      peopleSatInfo:['未审核','已审核','已推荐','已面试','已发Offer','入职','淘汰','已结算'],
      popForitem: ''

    }
  },
  computed:{

  },
  methods:{
    toPeopleDetail(item){
      this.$router.push({
      name:'peopledetail',
      query:{
          id: item.resumeId
        }
      })
    },
    updateHandle(){
      if(this.remark.length > 99){
        this.$toast('淘汰原因不能超过99个字符哦~');
        return
      }
      this.$http.post(Config.baseUrl + '/api/resume/status',
        {
          status: this.newstatus,
          prid: this.popForitem.prid,
          remark: this.remark
        }
      ).then(function(rsp){
        if(rsp.data.code == 1){
          this.$toast('更新成功即将返回')
          setTimeout(() => {
            this.resumesList= []
            this.show = false
            this.currentPage =1
            this.finished=false
            this.onLoad()
          }, 1000);
        }else{

          this.$toast('更新失败即将返回')
            setTimeout(() => {
              this.$router.go(-1)
            }, 1000);
        }
      },function(error){
        console.log('====================================');
        console.log(error);
        this.$toast('更新失败即将返回')
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000);
        console.log('====================================');
      })
    },
    payPayback(){
      this.$toast('支付接口开通中~')
    },
    updateStatus(item){

      this.show = true
      this.newstatus = item.status
      this.popForitem = item

    },
    tagType(item){
      switch (item.status) {
        case 1:
        case 2:
        case 3:
          return 'primary'
        case 4:
        case 5:
          return 'success'
        case 7:
          return 'danger'
        case 0:
        case 6:
          return ''
        default:
          return ''
          break;
      }
    },
    getPosInfo(){
      this.$http.get(Config.baseUrl + '/api/position/'+this.$route.query.positionid).then(function(rsp){
        console.log('====================================');
        console.log(rsp);
        console.log('====================================');
        if(rsp.status == 200 && rsp.data.code == 1){
          this.posDetail = rsp.data.data
        }
      },function(error){
        console.log('====================================');
        console.log(error);
        console.log('====================================');
      })
    },
    onLoad(){

      this.loading = true
      this.$http.get(Config.baseUrl + '/api/lietou/position/resumes/'+this.$route.query.positionid + '/' + this.currentPage).then(function(rsp){
        console.log('====================================');
        console.log(rsp);
        console.log('====================================');
        if(rsp.status == 200){
          if(rsp.data.pageNum == this.currentPage){
            this.finished = rsp.data.isLastPage
            this.resumesList = this.resumesList.concat(rsp.data.list)
            this.currentPage++
            this.loading = false
          }else if(rsp.data.pageNum == 0){
            this.loading = false
            this.myresumes = [];
            this.finished = true
            this.$toast('暂无数据')
          }
        }
      },function(error){
        console.log('====================================');
        console.log(error);
        console.log('====================================');
      })
      console.log('====================================');
      console.log(this.resumesList);
      this.loading = false;
      console.log('====================================');
    },
    onClickLeft(){
      this.$router.go(-1)
    }
  },
  mounted() {
    this.$store.commit('hideTab')
    console.log(this.$route.query.positionid)
    this.onLoad()
    this.getPosInfo()
  },
}
</script>

<style lang="stylus" scoped>
.updatecontent{
  // padding 20px 20px
  width 100%;
  height 100%
  .content{
    padding  20px 0px
  }
  .btn{
    width 80%
    left 10%
    margin-top 20px
  }
  .btn_pay{
    color white
    background-color #f44
    border-color #f44

  }
  .btn_update{
    border-color #38f
    color #38f

  }
}
.avatar{
  width 45px;
  height 45px
  border-radius 100%
}
.peoplecontent{
  display flex
  justify-content flex-start
  flex-wrap nowrap
  align-items  center
}
.des{
  padding 0 12px
  flex 1
}
.content{
  width 100%
  height 100%
  padding 15px 15px
}

</style>

